@charset "utf-8";
/*
	公用总样式表
		1.全局样式规定。
*/
@import './util/_scss_function';
html,body{
    @include m;
    @include p;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    font-family: "Helvetica Neue","Microsoft YaHei",Helvetica,Tahoma,sans-serif;
    background-color: #fff;
}
ul, ol, li,p{
    @include m;
    @include p;
    list-style: none;
}
input,textarea{
    outline: none;
}
a{
    text-decoration: none;
}
img{
    border: 0;
}
table{
    border-collapse: collapse;
    border-spacing: 0;
}
// 模糊滤镜
.filter-transition{
    @include transition(.5s);
}
.filter{
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}
.content {
    @include content;
}

.btn-white{
    @include btn;
    @include transition(.25s);
    background-color: #fff;
    &.active,
    &:hover{
        background-color: #de1e30;
        color: #fff;
    }
    &.active{
        &:hover{
            background-color: #cd1b2b;
        }
    }
    &.visible{
        background-color: #ccc!important;
        cursor: auto;
    }
    & .disabled {
        background-color: #e7e7e8;
        color: #bbb;
    }
}
// 粉色按钮
.btn-pink{
    @include transition(.25s);
    background-color: #f5677d;
    color: #fff;
    &.active,
    &:hover{
        background-color: #de1e30;
        color: #fff;
    }
    &.active{
        &:hover{
            background-color: #cd1b2b;
        }
    }
    &.visible{
        background-color: #ccc!important;
        cursor: auto;
    }
}

// 带边框按钮
.btn-border{
    @include transition(.25s);
    background-color: #fff;
    line-height: 28px;
    border: 1px solid #ddd;
    &.active,
    &:hover{
        background-color: #de1e30;
        border-color: #de1e30;
        color: #fff;
    }
}

/* 背景颜色*/
// 黑色
.bgcolor-333{
    background-color: #333;
}
.bgcolor-666{
    background-color: #666;
}
.bgcolor-999{
    background-color: #999;
}
.bgcolor-bbb{
    background-color: #bbb;
}
.bgcolor-e2e2e5{
    background-color: #e2e2e5;
}
.bgcolor-ededee{
    background-color: #ededee;
}
.bgcolor-f4f4f8{
    background-color: #f4f4f8;
}
.bgcolor-e8e8ee{
    background-color: #e8e8ee;
}


// 白色
.bgcolor-white,
.bgcolor-fff{
    background-color: #fff;
}
// 红色
.bgcolor-red,
.bgcolor-de1e30{
    background-color: #de1e30;
}
.bgcolor-red2,
.bgcolor-ffe6e6{
    background-color: #ffe6e6;
}
.bgcolor-red3,
.bgcolor-ff807e{
    background-color: #ff807e;
}
.bgcolor-e74c5b {
    background-color: #e74c5b;
}
.bgcolor-c4314e {
    background-color: #c4314e;
}
.bgcolor-ff647e{
    background-color: #ff647e;
}
.bgcolor-ca3148{
    background-color: #ca3148;
}
// 黄色
.bgcolor-yellow4{
    background-color: #f2bf51;
}
.bgcolor-yellow5{
    background-color: #ffa03b;
}

// 蓝色
.bgcolor-blue1{
    background-color: #6dbcee;
}
// 灰色
.bgcolor-e2e2e5{
    background-color: #e2e2e5;
}
.bgcolor-f8f8f8{
    background-color: #f8f8f8;
}
/* 字体颜色*/
// 白色
.color-white{
    color: #fff;
}
// 红色
.color-red,
.color-de1e30{
    color: #de1e30;
}
.color-red3,
.color-ff807e{
    color: #ff807e;
}
.color-red4,
.color-ff647e{
    color: #ff647e;
}
.color-e74c5b {
    color: #e74c5b;
}
.color-c4314e {
    color: #c4314e;
}

// 黑色
.color-black,
.color-333{
    color: #333;
}
// 灰色
.color-gray,
.color-666{
    color: #666;
}
.color-gray2,
.color-999{
    color: #999;
}
.color-bbb{
    color: #bbb;
}
.color-ddd{
    color: #ddd;
}
.color-777{
    color: #777;
}
.color-555{
    color: #555;
}
.color-e2e2e5{
    color: #e2e2e5;
}
.color-f4f4f8{
    color: #f4f4f8;
}
.color-e8e8ee{
    color: #e8e8ee;
}
// 绿色
.color-green,
.color-86ca01{
    color: #86ca01;
}
.color-green2,
.color-31d193{
    color: #31d193;
}
.color-green3,
.color-dddce0{
    color: #dddce0;
}
// 黄色
.color-yellow,
.color-ffb980{
    color: #ffb980;
}
.color-yellow2,
.color-ff976e{
    color: #ff976e;
}
.color-yellow3,
.color-ff9000{
    color: #ff9000;
}
.color-yellow4,
.color-f2bf51{
    color: #f2bf51;
}
.color-yellow5,
.color-ffa03b{
    color: #ffa03b;
}
.color-yellow6,
.color-fff36b{
    color: #fff36b;
}
.color-f8c701{
    color: #f8c701;
}

// 粉色
.color-powder,
.color-ffb2be{
    color: #ffb2be;
}
// 蓝色
.color-blue,
.color-6cd0ff{
    color: #6cd0ff;
}
.color-blue1,
.color-6dbcee{
    color: #6dbcee;
}
.color-blue2,
.color-0072bb{
    color: #0072bb;
}
/*布局*/
.col-2{
    width: 50%;
}
.col-3{
    width: 33.2%;
}
.col-4{
    width: 25%;
}
.col-5{
    width: 20%;
}
.col-6{
    width: 16.668%;
}
.col-7{
    width: 14.2%;
}
.col-8{
    width: 12.5%;
}
.col-9{
    width: 11.1%;
}
.col-10{
    width: 10%;
}

.col-md-12 {
    width: 100%
}

.col-md-11 {
    width: 91.66666667%
}

.col-md-10 {
    width: 83.33333333%
}

.col-md-9 {
    width: 75%
}

.col-md-8 {
    width: 66.66666667%
}
.col-md-7 {
    width: 58.33333333%
}

.col-md-6 {
    width: 50%
}

.col-md-5 {
    width: 41.66666667%
}

.col-md-4 {
    width: 33.33333333%
}

.col-md-3 {
    width: 25%
}

.col-md-2 {
    width: 16.66666667%
}

.col-md-1 {
    width: 8.33333333%
}
/* 下拉框*/

/* 浮动 */
.float-left{float: left;}
.float-right{float: right}
.display-i-b{
    display: inline-block;
}
.display-i-f{
    display: inline-flex;
}
.display-f{
    display: flex;
}
.display-b{
    display: block;
}
.white-space-n{
    white-space: nowrap;
}
.hide{
    display: none!important;
}
.visibility{
    visibility:hidden;
}
.v-a-m{
    vertical-align: middle;
}
.v-a-t{
    vertical-align: top;
}
.v-a-b{
    vertical-align: bottom;
}
.position-r{
    position: relative;
}
.position-a{
    position: absolute;
}
.position-i{
    position: inherit;
}
/* 清除浮动 */
.clearfix{
    @include clearfix();
}
.clearfix-row{
    @include clearfix-row();
}

@for $i from 0 through 640 {
// @for $i from 0 through 3 {
    .z-index-#{$i} { z-index: #{$i}; }
    /* 宽度 */
    .w-#{$i} { width: #{$i}px; }
    /* 行高 */
    .line-h-#{$i} { line-height: #{$i}px; }
    /* 高 */
    .h-#{$i} { height: #{$i}px; }
    /* 内边距 */
    // left
    .p-l-#{$i} { padding-left: #{$i}px; }
    // right
    .p-r-#{$i} { padding-right: #{$i}px; }
    // top
    .p-t-#{$i} { padding-top: #{$i}px; }
    // bottom
    .p-b-#{$i} { padding-bottom: #{$i}px; }
    /* 外边距 */
    // left
    .m-l-#{$i} { margin-left: #{$i}px; }
    // right
    .m-r-#{$i} { margin-right: #{$i}px; }
    // top
    .m-t-#{$i} { margin-top: #{$i}px; }
    // bottom
    .m-b-#{$i} { margin-bottom: #{$i}px; }
    .flex-#{$i} { flex: #{$i}; }
}
@for $i from 0 through 100 {
// @for $i from 0 through 3 {
    // border-radius
    .b-radius-#{$i}{ border-radius: #{$i}px; }
    // 字体大小
    .f-s-#{$i} { font-size: #{$i}px; }
}

.right-45{
    right:45px;
}
/* 内容流 */
.text-a-c{
    text-align: center;
}
.text-a-l{
    text-align: left;
}
.text-a-r{
    text-align: right;
}
/* 鼠标样式 */
.cursor-p{
    cursor: pointer;
}
.w-1055{
    width: 1055px;
}
.w-1058{
    width: 1058px;
}
.w-bar-75{
    width: 75%;
}
.w-bar-80{
    width: 80%;
}
.w-bar-100{
    width: 100%;
}
/*背景色*/
.bck-color-fff{
    background-color:#fff;
}
.bck-color-fafafa{
    background-color:#fafafa;
}
.bck-color-f0f1f2{
    background-color:#f0f1f2;
}
.bck-color-ededed{
    background-color:#ededed;
}
.bck-color-f5f5f5{
    background-color: #f5f5f5;
}
.bck-color-f7f7f8{
    background-color: #f7f7f8;
}
.bck-color-f25451{
    background-color: #f25451;
}
.bck-color-ddd{
    background-color: #ddd;
}
.bck-color-56a4d5{
    background-color: #56a4d5;
}
.bck-color-a1d33e{
    background-color: #a1d33e;
}

// 边框
.bd-none{
    border-width:0!important;
}
.bd-left{
    border-left: 1px solid #eee;
}
.bd-left-e5{
    border-left: 1px solid #e5e5e5;
}

.bd-bottom{
    border-bottom: 1px solid #eee;
}

.data-null{
    font-size: 18px;
    text-align: center;
    color: #bababa;
    margin: 90px 0 95px;
}
.o-hidden{
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.transition-none{
    @include transition(0s!important);
}

.text-box{
    display: inline-block;
    vertical-align: top;
    color: #dde3e7;
    position: relative;
    pointer-events: auto;
    & textarea,
    & input{
        @include transition-fn(border-color .3s ease);
        border: 1px solid #dde3e7;
        background-color: #fff;
        float: left;
        padding-left:10px;
        padding-right:10px;
        pointer-events: auto;
        font-size: 14px;
        position: relative;
        &:focus{
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        }
        &:-webkit-autofill {
            background-color: transparent;
        }
        &::-webkit-input-placeholder { /* WebKit browsers */
            color:    #bbb;
        }
        &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color:    #bbb;
        }
        &::-moz-placeholder { /* Mozilla Firefox 19+ */
            color:    #bbb;
        }
        &:-ms-input-placeholder { /* Internet Explorer 10+ */
            color:    #bbb;
        }
    }
    & input{
        height: 38px;
        line-height: 38px;
        padding-top:0px;
        padding-bottom:0px;
    }
    &:after,
    &:before{
        position: absolute;
        left:2px;
        top:2px;
        bottom: 2px;
        display: none;
    }
    &:before{
        content: '';
        background-color: #fff;
        right: 2px;
    }
    &:after{
        @include animation(error-icon,.3s,.2s);
        content: attr(data-hint);
        pointer-events: none;
        padding: 0 10px;
        line-height: 36px;
        font-size: 12px;
    }
    &.error,
    &.success{
        & input{
            height: 36px;
            line-height: 36px;
        }
        &:before,
        &:after{
            display: block;
        }
    }
    &.error{
        color: #de1e30;
        & textarea,
        & input {
            border: 2px solid #de1e30;
        }
    }
    &.success{
        color: #2ecc71;
        & textarea,
        & input {
            border: 2px solid #2ecc71;
        }
    }
    &.disabled{
        color: #bbb;
        & textarea,
        & input{
            background-color: #e2e2e3;
            border: 0;
            height: 40px;
            line-height: 40px;
        }
        &:after{
            background-color: #e2e2e3;
            display: block;
        }
    }
}
@keyframes pop-pages-show{
    100%{
        left: 0%;
    }
}
@-webkit-keyframes pop-pages-show{
    100%{
        left: 0%;
    }
}
@-o-keyframes pop-pages-show{
    100%{
        left: 0%;
    }
}
@-moz-keyframes pop-pages-show{
    100%{
        left: 0%;
    }
}

.pop-pages{
    position: fixed;
    top:0;
    left:100%;
    right:0;
    bottom:0;
    z-index:11;
    background-color: #F2F2F2;
    font-size: 14px;
    color: #777;
    width: 100%;
    pointer-events: auto;
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    & .headers{
        width: 100%;
        background-color: #fff;
        line-height:45px;
        height: 45px;
        box-shadow: 0 0 3px rgba(0,0,0,0.15);
        position: relative;
        & .title{
            position: absolute;
            z-index:-1;
            left:0;
            top:0;
            width: 100%;
        }
    }
    & .text-box {
        &.display-f{
            display: flex;
        }
    }
    & .btn-select{
        border: 1px solid #dde3e7;
        background-color: #fff;
        line-height: 40px;
        min-height: 40px;
        text-indent: 10px;
        pointer-events: auto;
    }
    & .post{
        width: 100%;
        padding: 0;
        text-align: center;
        line-height: 40px;
    }
    &.show{
        @include animation(pop-pages-show,.3s,.15s);
        display: block;
    }
}
